<template>
  <div id="fire-real-time">
    <el-divider>烟火实时检测</el-divider>
    <audio ref="audio" src="~@/assets/warning.mp3" controls="controls" hidden loop />
    <RealTime :real-time-img="realTimeImg" :real-time-img2="realTimeImg2" :real-time-img3="realTimeImg3" :real-time-img4="realTimeImg4" />
  </div>
</template>

<script>
import RealTime from '@/components/RealTime'
import { fireAlarm, BASE_DETECT_URL } from '@/api/realTime'

export default {
  name: 'FireRealTime',
  components: {
    RealTime
  },
  data() {
    return {
      // realTimeImg: BASE_DETECT_URL + '/fire_detect_realtime',
      realTimeImg: '',
      realTimeImg2: '',
      realTimeImg3: '',
      realTimeImg4: '',
      num: 0,
      time: function() {},
      result: {},
      currDate: 0
    }
  },
  watch: {
    result() {
      // this.$refs.audio.currentTime = 2
      // this.audio.play()
      const date = new Date()
      const year = date.getFullYear()

      const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      const week = date.getDay() // 星期
      const weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      // 拼接 时间格式处理
      const time = year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds + ' ' + weekArr[week]
      if (this.result.get_violator_id_status === 1 && this.currDate < this.result.violator_name[0].time[0]) {
        this.$nextTick(() => {
          this.$refs.audio.currentTime = 2
          this.$refs.audio.play()
        })
        this.$notify({
          title: '违规警报',
          message: `${this.result.violator_name[0].id.toString()}烟火警报，时间:${time}`,
          type: 'warning',
          position: 'bottom-right',
          duration: 0,
          onClose: () => {
            this.$nextTick(() => {
              this.$refs.audio.pause()
            })
          }
        })
      }
    }
  },
  mounted() {
    if (location.href.indexOf('#reloaded') === -1) {
      location.href = location.href + '#reloaded'
      location.reload()
    }
  },
  created() {
    this.currDate = (new Date().getTime()) / 1000
    if (!this.$store.getters.useVideo) {
      this.realTimeImg = BASE_DETECT_URL + '/fire_detect_realtime'
      console.log(this.realTimeImg)
    } else {
      if (this.$store.state.camera.camera1.detectFlag) {
        this.realTimeImg = BASE_DETECT_URL + '/fire_detect_realtime' + '?monitor_id=' + this.$store.state.camera.camera1.url + '&loop=' + this.$store.state.camera.loop
      }
      if (this.$store.state.camera.camera2.detectFlag) {
        this.realTimeImg2 = BASE_DETECT_URL + '/fire_detect_realtime' + '?monitor_id=' + this.$store.state.camera.camera2.url + '&loop=' + this.$store.state.camera.loop
      }
      if (this.$store.state.camera.camera3.detectFlag) {
        this.realTimeImg3 = BASE_DETECT_URL + '/fire_detect_realtime' + '?monitor_id=' + this.$store.state.camera.camera3.url + '&loop=' + this.$store.state.camera.loop
      }
      if (this.$store.state.camera.camera4.detectFlag) {
        this.realTimeImg4 = BASE_DETECT_URL + '/fire_detect_realtime' + '?monitor_id=' + this.$store.state.camera.camera4.url + '&loop=' + this.$store.state.camera.loop
      }
    }
    this.time = window.setInterval(() => {
      setTimeout(this.getFireAlarm, 0)
    }, 1000)
    this.$alert('实时监控已连接', '提示', {
      confirmButtonText: '确定'
    })
  },
  destroyed() {
    window.clearInterval(this.time)
  },
  methods: {
    showWarningWindow() {
      this.$refs.audio.currentTime = 2
      this.$refs.audio.play()
      this.$notify({
        title: '违规警报',
        message: '烟火实时检测违规警报',
        type: 'warning',
        position: 'bottom-right',
        duration: 0,
        onClose: () => {
          this.$refs.audio.pause()
        }
      })
    },
    getNewMessage() {
      console.log(`请求${this.num++}次`)
    },
    async getFireAlarm() {
      this.result = await fireAlarm()
    }
  }
}
</script>

<style scoped>

</style>
